<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>LabeledMarker Documentation: Examples</title>
    <link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
    <link rel="stylesheet" type="text/css" href="../../util/docs/template/local_extensions.css"></link>
    <script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<h1>MarkerWithLabel Examples</h1>

<p><a href="reference.html">API Reference</a></p>

<p>Note: Be sure to include <tt>markerwithlabel.js</tt> or <tt>markerwithlabel_packed.js</tt> in your document header after the Google Maps JavaScript API V3 has been included.</p>
<pre class="prettyprint">
	&lt;script src=&quot;/path/to/markerwithlabel.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</pre>

<div>
<h2><span lang="en-us">Creating a Basic Marker</span></h2>
<p>The example below shows how to use MarkerWithLabel to create a marker that has a label centered beneath it in a small box. The label can be styled most easily by defining a CSS class with the desired properties for the label DIV. In this example the class is called "labels" and this name is passed in the <code>labelClass</code> parameter to MarkerWithLabel. Additional styling information can be passed in the <code>labelStyle</code> parameter. The text of the label is passed in <code>labelContent</code>. Other parameters that can be passed to MarkerWithLabel are identical to those that can be passed to <code>google.maps.Marker</code>.</p>
<pre class="prettyprint">
 &lt;style type="text/css"&gt;
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;     
     border: 2px solid black;
     white-space: nowrap;
   }
 &lt;/style&gt;

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker1 = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}
     });

     var iw1 = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });
</pre>
<p><a href="../examples/basic.html">View example (basic.html)</a>. </p>
</div>

<div>
<h2><span lang="en-us">Creating a Lettered Marker</span></h2>
<p>This example shows how to place a single character over the center of Google's default marker. Note the use of the <code>labelInBackground</code> property to ensure the label appears in the foreground (rather than in the background behind the marker).</p>
<pre class="prettyprint">
 &lt;style type="text/css"&gt;
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 10px;     
     white-space: nowrap;
   }
 &lt;/style&gt;

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       map: map,
       draggable: true,
       raiseOnDrag: true,
       labelContent: "A",
       labelAnchor: new google.maps.Point(3, 30),
       labelClass: "labels", // the CSS class for the label
       labelInBackground: false
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });
</pre>
<p><a href="../examples/lettered.html">View example (lettered.html)</a>. </p>
</div>

<div>
<h2><span lang="en-us">Mouse Events</span></h2>
<p>This example illustrates the mouse events that are fired when you interact with a marker with a label. You can also attach event listeners to "property changed" events. The marker here has been made draggable so you can see the events that are fired when the marker is moved around the map. (You can start the drag by clicking the marker portion or the label portion.)</p>
<pre class="prettyprint">
 &lt;style type="text/css"&gt;
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 10px;     
     white-space: nowrap;
   }
 &lt;/style&gt;

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels" // the CSS class for the label
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });
     
     google.maps.event.addListener(marker, "click", function (e) { log("Click"); });
     google.maps.event.addListener(marker, "dblclick", function (e) { log("Double Click"); });
     google.maps.event.addListener(marker, "mouseover", function (e) { log("Mouse Over"); });
     google.maps.event.addListener(marker, "mouseout", function (e) { log("Mouse Out"); });
     google.maps.event.addListener(marker, "mouseup", function (e) { log("Mouse Up"); });
     google.maps.event.addListener(marker, "mousedown", function (e) { log("Mouse Down"); });
     google.maps.event.addListener(marker, "dragstart", function (mEvent) { log("Drag Start: " + mEvent.latLng.toString()); });
     google.maps.event.addListener(marker, "drag", function (mEvent) { log("Drag: " + mEvent.latLng.toString()); });
     google.maps.event.addListener(marker, "dragend", function (mEvent) { log("Drag End: " + mEvent.latLng.toString()); });
</pre>
<p><a href="../examples/events.html">View example (events.html)</a>. </p>
</div>

<div>
<h2><span lang="en-us">Pictures as Labels</span></h2>
<p>This example illustrates that <code>labelContent</code> can also be set to any arbitrary HTML DOM node. In this case, the DOM node is a simple img element holding a picture. The picture label has an opacity of 0.50 to make it possible to see what's behind it on the map.</p>
<pre class="prettyprint">
 &lt;style type="text/css"&gt;
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 100px;     
     white-space: nowrap;
   }
 &lt;/style&gt;

     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var pictureLabel = document.createElement("img");
     pictureLabel.src = "home.jpg";

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       map: map,
       draggable: true,
       raiseOnDrag: true,
       labelContent: pictureLabel,
       labelAnchor: new google.maps.Point(50, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.50}
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, this); });
</pre>
<p><a href="../examples/picturelabel.html">View example (picturelabel.html)</a>. </p>
</div>

</body>
</html>
